<template>
  <div>
    <a-upload
      :action="action"
      :fileList="fileList"
      @change="handleChange"
      :multiple="true"
      :beforeUpload="beforeUpload"
      directory
    >
      <a-button> <a-icon type="upload" />上传 </a-button>
    </a-upload>
  </div>
</template>

<script>
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
export default {
  data() {
    return {
      loading: false,
      // imageUrl: '',
      action: '',
      file_system_url: '',
      cahceFileList: [],
      //  点击预览图片
      previewImage: '',
      // 允许上传的图片类型:
      ImgType: ['jpg', 'jpeg', 'png']
    };
  },
  props: {
    fileList: {
      type: [Object, Array],
      default() {
        return [];
      }
    }
  },
  model: {
    prop: 'fileList',
    event: 'update:file'
  },
  mounted() {
    var dom = document.getElementsByClassName('ant-upload-list');
    console.log(dom);
    dom[0].style = 'max-height: 90px;overflow: auto;';
    this.loading = true;
    this.$http.post('/api/common/LocalStorage/getUploadUrl').then((rst) => {
      this.loading = false;
      if (rst.code == 1) {
        this.file_system_url = rst.file_system_url;
      } else {
        this.$message.error('获取上传接口失败！');
      }
    });
  },
  methods: {
    handleChange(info) {
      let fileList = [...info.fileList];
      fileList = fileList.map((file) => {
        if (file.response) {
          file.url = file.response.url;
        }
        return file;
      });

      this.fileList = fileList;
      this.$emit('update:file', this.fileList);
    },
    beforeUpload(file) {
      let type = file.type.split('/')[1];
      let url = `${this.file_system_url}&extension=${type}&encode=base64`;
      this.action = decodeURIComponent(url);
    }
  }
};
</script>
